import { useRoute, useRouter } from "vue-router";
import "./index.scss";
import { computed, defineComponent } from "vue";
import { useMenuStore } from "@/stores/modules/menu";
import { HOME_URL } from "@/config";
import { ElBreadcrumb, ElBreadcrumbItem, ElIcon } from "element-plus";
import { Menu } from "@/api/interface";
import IconMap from "@/config/sideNavIconMap";

export default defineComponent({
  name: "breadCrumb",
  setup() {
    const route = useRoute();
    const router = useRouter();
    const menuStore = useMenuStore();
    const breadcrumbList = computed(() => {
      let breadcrumbData =
        menuStore.breadcrumbListGet[
          route.matched[route.matched.length - 1].path
        ] ?? [];
      // 🙅‍♀️不需要首页面包屑可删除以下判断
      if (breadcrumbData[0].path !== HOME_URL) {
        breadcrumbData = [
          { path: HOME_URL, meta: { icon: "HomeFilled", title: "首页" } },
          ...breadcrumbData,
        ];
      }
      return breadcrumbData;
    });

    console.log("breadcrumbList", breadcrumbList.value);
    const onBreadcrumbClick = (item: Menu.MenuOptions, index: number) => {
      if (index !== breadcrumbList.value.length - 1) router.push(item.path);
    };
    return () => {
      return (
        <div class="tabs-menu">
          <ElBreadcrumb>
            {breadcrumbList.value &&
              breadcrumbList.value.map(
                (item: Menu.MenuOptions, index: number) => (
                  <ElBreadcrumbItem onClick={onBreadcrumbClick(item, index)}>
                    <ElIcon class="tabs-icon">{IconMap[item.meta.icon]}</ElIcon>
                    <span class="breadcrumb-title">{item.meta.title}</span>
                  </ElBreadcrumbItem>
                )
              )}
          </ElBreadcrumb>
        </div>
      );
    };
  },
});
